<template>
    <div class="container">
        <p class="title"><span>网校老师</span><el-icon :size="18">
                <ArrowRight />
            </el-icon></p>
            <!-- :autoplay="{ delay: 2500, disableOnInteraction: false }" -->
        <swiper :modules="[Autoplay,Navigation]" :loop="true"
    
    :navigation="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :slides-per-view="4" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
            <swiper-slide v-for="item in cards" :key="item.name" >
                <el-card class="the-card">
                    <div>
                        <div class="avatar">
                            <img class="card-image" :src="item.avator" alt="Teacher Avatar">
                        </div>
                        
                        <p class="content">
                            <span class="name">{{ item.name }}</span>
                            <span class="desc">{{ item.desc }}</span>
                        </p>
                    </div>
                </el-card>
            </swiper-slide>
        </swiper>
    </div>
</template>
  
<script setup>
import { reactive, computed } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
// import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Autoplay,Navigation } from 'swiper/modules';
const cards = reactive([
    { avator: '/one.png', name: '郑伟', desc: '中国经济师' },
    { avator: '', name: '郑伟', desc: '中国经济师' },

]);

function onSwiper() {

}
function onSlideChange() { }

</script>
  
<style scoped>
.container .title {
    font-size: 32px;
    font-weight: bold;
    line-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.the-card {
    width: 290px;
    flex-shrink: 0;
}
.the-card .avatar{
    width: 240px;
    height: 340px;
    overflow: hidden;
}
.card-image {
    /* object-fit: cover; */
    width: 100%;
    height:100%;
}
.card-image:hover{
    scale: 1.2;
}
.the-card .content{
    padding: 10px 20px;
}
.the-card .name{
    font-size: 18px;
}
.the-card .desc{
    margin-left: 10px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
}
</style>